<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>JSCSSP, a CSS parser in JavaScript</title>
    <style>
    .atrule { color: olive }
    .comment { font-style: italic }
    .medium { color: green }
    .error { color: red; font-style: italic }
    .error:after {
      content: "INVALID";
      margin-left: 10px;
      font-style: normal;
      background-color: red;
      color: black;
      padding-left: 1em;
      padding-right: 1em;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      -o-border-radius: 5px;
      border-radius: 5px;
    }
    .selector { color: #505050 }
    .property { color: maroon }
    .value { color: orange }
    .url, .string { color: teal }
    .bang { color: red }
  </style>
    <script type="text/javascript"  src="cssParser.js"></script>
    <script type="text/javascript">
    function doit() {
      var source = document.getElementById("source");
      var ss = source.value;
      
      var parser = new CSSParser();
      var sheet = parser.parse(ss, false, true);
      var serialization = document.getElementById("serialization");
      if (sheet)
        serialization.innerHTML = sheet.cssText();
      else
        serialization.innerHTML = "";
    }
  </script>
</head>

<body>
<div id="main">
  <div id="header">
    <h1>JSCSSP <span id="subheader">a CSS parser in JavaScript</span></h1>
  </div>
  <ul id="nav">
    <li><a href="index.html">Home</a></li>
    <li><a href="news.html">News</a></li>
    <li><a href="freshmeat.html">Downloads</a></li>
    <li><a href="faq.html">FAQ</a></li>
    <li><a href="doc.html">Doc</a></li>
  </ul>
  <div class="contentArea">
    <p>JSCSSP is a CSS parser written in cross-browser JavaScript. It parses a
       string containing CSS styles and outputs a CSS Object Model (warning: not
       <em>the</em> CSS Object Model). It can preserve some comments, at-rules and style
       rules that your browser does not recognize and trashes, and even whitespaces
       if you absolutely need to preserve indentation and blank lines.</p>
    <p><span style="background-color: red; color: white; border-radius: 4px; padding: 0px 4px">NEW</span>
      JSCSSP now has support for CSS Media Queries</p>
    <p>JSCSSP is <strong>NOT</strong> based on regular expressions for parsing, making it robust and easily extensible.</p>
    <p>It's very simple to use and manipulate,
       and can be used to write a CSS validator, filters or even CSS extensions
       for a given browser. Here is the whole code for the interactive demo below:</p>
    <pre class="brush: js">var source = document.getElementById("source");
var ss = source.value;

var parser = new CSSParser();
var sheet = parser.parse(ss, false, true);
var serialization = document.getElementById("serialization");
if (sheet)
  serialization.innerHTML = sheet.cssText();
else
  serialization.innerHTML = "";</pre>
    <div class="rounded"><h5>Interactive demo:</h5>
      <div class="innerbox">
        <p>You can edit the stylesheet in the textarea just below. Press on the "Parse and
           Reserialize" button to see how JSSCSSP handles it.
           <strong>Warning</strong>: JSCSSP is still a work in progress so please don't be too
           surprised if you hit a bug...</p>
        <textarea style="width: 100%" rows="15" id="source" spellcheck="false">/* JSCSSP test */
@media screen AND (max-width: 500px) { body { background-color: #f0f0f0; }}

@keyframes my_anim { from { opacity: 1; } to { opacity: 0; } }

body { var-my-margin: 12px }
h1 {  margin-top: var(my-margin);
      background-image: linear-gradient(to top, white, #c0c0c0); }

/* shorthands */
#myP { border: thin groove silver; }

/* escapes */
.f\00C4 oo { p\roperty: value; content: "foo \
bar" }</textarea>
        <p>
          <button onclick="doit()">Parse and reserialize below</button>
        </p>
        <p>JSCSSP is called to parse the
           stylesheet and here's how JSCSSP reserializes it:</p>
        <pre id="serialization"></pre>
      </div>
    </div>
  </div>
  <div id="footer">Copyright &copy; 2010-2011 Daniel Glazman</div>
</div>
</body>
</html>
